<template>
  <div class="content">

    <div class="row">
      <div class="col-md-10">
        <el-form ref="form" :model="form" label-width="80px" style="padding: 10px;">
          <div class="col-md-4">
            <el-form-item label="角色名称">
              <el-input v-model="form.name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
          </div>
          <div class="col-md-2">
            <el-button type="primary" size="medium" @click="addrole(1)">添加</el-button>
          </div>
        </el-form>
      </div>
      <mu-divider/>
      <mu-dialog title="角色添加或修改" width="360" :open.sync="openSimple">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="role_name">
            <el-input type="text" v-model="ruleForm.role_name" auto-complete="off" placeholder="请输入目录名称"></el-input>
          </el-form-item>
        </el-form>
        <el-button slot="actions" flat color="primary" @click="closeSimpleDialog" size="small">关闭</el-button>
        <el-button slot="actions" flat type="primary" @click="addrole(2)" size="small">提交</el-button>
      </mu-dialog>


      <div class="col-md-3" style="background-color: #E4E7ED;min-height: 520px;padding-right: 1px;">
        <el-tree :data="sourcedata" :props="defaultProps" @node-click="handleNodeClick"
                 :filter-node-method="filterNode"
                 node-key="id" :default-expanded-keys="[0]"
                 ref="tree2">
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <a class="el-icon-circle-plus"
             @click="()=> append(data)">
          </a>
          <a class="el-icon-edit"
             @click="()=> update(node, data)">
          </a>
          <a class="el-icon-delete"
             @click="()=> remove(node, data)">
          </a>
        </span>
      </span>
        </el-tree>
      </div>
      <div class="col-md-9" style="background-color:#F2F6FC;min-height: 520px;padding-left: 1px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column label="选择" width="200">
            <template slot-scope="scope">
              <el-radio class="radio" v-model="radio" :label="scope.row.operation_id">{{scope.row.operation_name}}
              </el-radio>
            </template>
          </el-table-column>
          <!--<el-table-column-->
          <!--prop="operation_name"-->
          <!--label="姓名"-->
          <!--width="150"-->
          <!--&gt;-->
          <!--</el-table-column>-->
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="150">
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;margin-left: 20px;">
          <!--<el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>-->
          <el-button @click="addroleoperation()">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    addroleInfo,
    getrolelist,
    deleteRoleInfo,
    updateRoleInfo,
    getoperationlist,
    addRoleoperationInfo
  } from '../api/api';

  export default {
    data() {
      return {
        radio: '',
        form: {
          name: ''
        },
        ruleForm: {
          role_name: '管理员',
        },
        rules: {
          role_name: [
            {required: true, message: '请输入角色名称', trigger: 'blur'},
            //{ validator: validaePass }
          ]
        },
        sourcedata: [],
        updatename: false,
        parent_id: '',
        openSimple: false,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [],
        video_role_id: ''
      }
    },
    methods: {
      openSimpleDialog() {
        this.openSimple = true;
      },
      closeSimpleDialog() {
        this.openSimple = false;
        this.parent_id = '';
      },
      addrole(n) {
        var _this = this;
        var name = '';
        if (n == 1) {
          name = this.form.name;
        } else {
          name = this.ruleForm.role_name;
        }
        if (name != '' && this.updatename == false) {
          var addParams = {role_name: name, role_comments: '', parent_id: _this.parent_id};
          addroleInfo(addParams)
            .then(responsedata => {
              //NProgress.done();
              let {status, data} = responsedata;
              if (status !== 200) {
                this.$message({
                  message: '请求失败',
                  type: 'error'
                });
              } else {
                var descritpion = data.descritpion;
                if (data.status == '90000') {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
//                  var roleList = data.values;
                  this.initDatesousre();
                } else {
                  this.$message({
                    message: descritpion,
                    type: 'error'
                  });
                }

              }
            })
            .catch(function (response) {
              _this.$notify.error({
                title: '错误',
                message: '网络请求失败'
              });
              console.log(response);
            });

        } else if (name !== '' && this.updatename == true) {
          var updateParams = {role_name: name, video_role_id: this.parent_id};
          updateRoleInfo(updateParams)
            .then(responsedata => {
              //NProgress.done();
              let {status, data} = responsedata;
              if (status !== 200) {
                this.$message({
                  message: '请求失败',
                  type: 'error'
                });
              } else {
                var descritpion = data.descritpion;
                if (data.status == '90000') {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  var VideoList = data.values;
                  this.initDatesousre();
                } else {
                  this.$message({
                    message: descritpion,
                    type: 'error'
                  });
                }

              }
            })
            .catch(function (response) {
              _this.$notify.error({
                title: '错误',
                message: '网络请求失败'
              });
              console.log(response);
            });
          this.updatename = false;
          this.parent_id = '';
        }
        this.closeSimpleDialog();
        console.log('submit!');
      },
      initDatesousre() {
        var _this = this;
        var loginParams = {};
        var jsonstr = JSON.stringify(loginParams);
        getrolelist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var roleList = data.values;
              _this.sourcedata = roleList;
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      initoperation() {
        var _this = this;
        var loginParams = {};
        var jsonstr = JSON.stringify(loginParams);
        getoperationlist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var List = data.values;
              _this.tableData = List;
              this.initRoleoperation();
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      initRoleoperation() {
        var _this = this;
        var loginParams = {video_role_id:this.video_role_id};
        var jsonstr = JSON.stringify(loginParams);
        getoperationlist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              if(data.status == '90000'){
                var operation_id = data.values[0].operation_id;
                this.radio=operation_id;
              }else{
                this.radio='';
              }

            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      handleNodeClick(data) {
        this.initoperation();
        this.video_role_id = data.id;
        this.radio = '';
        console.log(data);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      append(data) {
        this.parent_id = data.id;
        this.openSimpleDialog();
//        const newChild = {id: id++, label: '新的摄像机', children: []};
//        if (!data.children) {
//          this.$set(data, 'children', []);
//        }
//        data.children.push(newChild);
      },
      update(node, data) {
        this.ruleForm.role_name = data.label;
        this.updatename = true;
        this.parent_id = data.id;
        this.openSimpleDialog();
//        const parent = node.parent;
//        const children = parent.data.children || parent.data;
//        const index = children.findIndex(d => d.id === data.id);
//        const newChild = {id: id++, label: '更新的摄像机', children: []};
//        var i = 0
//        for (i in data) {
//          if (i == index) {
//            data[index] = newChild;
//          }
//        }

      },
      remove(node, data) {
        var _this = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            var deleteParams = {video_role_id: data.id};
            deleteRoleInfo(deleteParams)
              .then(responsedata => {
                let {status, data} = responsedata;
                if (status !== 200) {
                  this.$message({
                    message: '请求失败',
                    type: 'error'
                  });
                } else {
                  var descritpion = data.descritpion;
                  if (data.status == '90000') {
                    //此处删除节点
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                    //此处删除节点
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.initDatesousre();
                  } else {
                    this.$message({
                      type: 'error',
                      message: descritpion
                    });
                  }
                }
              })
              .catch(function (response) {
                _this.$notify.error({
                  title: '错误',
                  message: '网络请求失败'
                });
                console.log(response);
              });


          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      addroleoperation() {
        var _this = this;
        var addParams = {video_role_id: this.video_role_id, operation_id: this.radio};
        addRoleoperationInfo(addParams)
          .then(responsedata => {
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var descritpion = data.descritpion;
              if (data.status == '90000') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
//                  var roleList = data.values;
//                this.initDatesousre();
              } else {
                this.$message({
                  message: descritpion,
                  type: 'error'
                });
              }

            }
          })
          .catch(function (response) {
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
        console.log('submit!');
      },
    },
    mounted() {
      this.initDatesousre();
    }
  }
</script>
<style>
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

</style>
